<template>
  <view>

    <view class="flex-col page" v-if="next">
      <uni-nav-bar dark :fixed="true" shadow background-color="#497bff" status-bar title="家长信息注册" />

      <view class="flex-col flex-1 group">

        <u-toast ref="uToast" />


        <u-form :model="form"  ref="uForm">
         

          <view class="flex-row  self-start section">
            <text class="flex-row  items-centers ">头像</text>
            <view class="flex-row justify-start items-center image-wrapper">
  
              
                                <u-upload class="image_1000" :action="action"  max-count=1 :show-progress=avaterFlag name="file"></u-upload>
     
            </view>
          </view>
          <u-form-item label="姓名" prop="nickName">
            <u-input v-model="form.nickName" />
          </u-form-item>

          <u-form-item label="性别" prop="sex">
            <u-radio-group v-model="form.sex">
              <u-radio @change="radioChange" v-for="(item, index) in radioList" :key="index" :label="item.name"
                :name="item.value" :disabled="item.disabled">
                {{item.name}}
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="关系" prop="relation">

            <u-select v-model="show" mode="single-column" :list="familyList" @confirm="confirms"></u-select>
            <u-input v-model="selectLabel" type="select" @click="show = true" placeholder="请选择" />
          </u-form-item>
          <u-form-item label="联系电话" prop="phonenumber" label-width="120rpx">
            <u-input v-model="form.phonenumber"   :disabled="true"/>
          </u-form-item>
          <u-form-item label="联系地址" prop="address"  label-width="120rpx">
            <u-input v-model="form.address" />
          </u-form-item>
        </u-form>
        <u-row>
          <u-col v-for="(item, index) in form.contactArray" :key="index" >
            <u-form-item label="联系人" label-width="110rpx">



              <view style="width: auto; display: flex;flex: auto; align-items: center;" >
                <u-select v-model="show" mode="single-column" :list="familyList" @confirm="confirms"></u-select>
                <u-input  :clearable="false" v-model="form.contactArray[index].contactRelation" type="select" @click="selectConfirm(index)" input-align="center"  style="flex-grow: 1;text-align: center;"
                  placeholder="关系"/>
                <u-input v-model="form.contactArray[index].contactNick" :clearable="false" style="flex-grow: 1;margin-right: -10rpx;text-align: center;" placeholder="姓名" input-align="center"/>
                <u-input v-model="form.contactArray[index].contactPhone"  :clearable="false" style="flex-grow: 1;text-align: center;"
                  placeholder="联系电话"    />
                <u-button v-if="index === 0 && form.contactArray.length > 0" size="mini"
                  style="padding: 3px 5px; margin-left: 5px;" type="primary" @click="handleAddContactInfo">添加</u-button>
                <u-button v-if="index > 0" size="mini" style="padding: 3px 5px; margin-left: 5px;" type="error"
                  @click="handleDeleteContactInfo(index)">删除</u-button>
              </view>

            </u-form-item>
          </u-col>
        </u-row>

        <view class="button" @click="submit"><text>下一步</text></view>
        <!-- <view class="flex-col justify-start items-center input text-wrapper"><text class="font text_13">下一页</text></view> -->

      </view>
    </view>




    <!-- //下一页 -->
    <view class="flex-col page" v-else>

      <uni-nav-bar dark :fixed="true" shadow background-color="#497bff" status-bar left-icon="left" left-text="返回"
        title="学生信息注册" @clickLeft="back" />
      <!-- <u-icon name="arrow-left" color="#888588" size="70" ></u-icon> -->

      <u-tabs ref="tabs" :list="tabList" :is-scroll="false" :current="current" active-color="#2979ff"
        @change="tabChange"></u-tabs>



      <u-toast ref="uToast" />
      <!-- <view class="panel-list">
       <view class="panel">
     
         <u-form-item class="panel-item" label="姓名" prop="nickName">
           <u-input v-model="form.nickName" />
         </u-form-item>
      <u-form-item  class="panel-item" label="性别" prop="sex">
        <u-radio-group v-model="form.sex">
          <u-radio @change="radioChange" v-for="(item, index) in radioList" :key="index" :label="item.name"
            :name="item.value" :disabled="item.disabled">
            {{item.name}}
          </u-radio>
        </u-radio-group>
      </u-form-item>
        <u-form-item label="生日" prop="birthday">
               
         	<u-calendar v-model="birthdayShow"  class="panel-item" mode="date" @change="change">
                   	</u-calendar>
           <u-input v-model="form.birthday" type="select" @click="birthdayShow = true" />
        </u-form-item>
       </view>
        </view> -->



      <view v-for="(item, indexss) in form.studentArray" :key="indexss" >


        <u-form :model="form" class="apply-form-field">
          <u-gap height="20" bg-color="#f5f5f5"></u-gap>

          <u-form-item label="姓名">
            <u-input v-model="item.name" class="form-field-select" />
          </u-form-item>

          <u-form-item label="性别">
            <u-radio-group v-model="item.sex">
              <u-radio @change="radioChange" v-for="(item, index) in radioList" :key="index" :lab="item.name"
                :name="item.value" :disabled="item.disabled">
                {{item.name}}
              </u-radio>
            </u-radio-group>
          </u-form-item>

          <u-form-item label="生日">

            <u-calendar v-model="birthdayShow" mode="date" @change="change">
            </u-calendar>
            <u-input placeholder="请选择" v-model="item.birthday" type="select" @click="selectBirthdayConfirm(indexss)"
              class="form-field-select" />
          </u-form-item>
          <u-form-item label="就读学校" label-width="120rpx">
            <u-input v-model="item.school" class="form-field-select" />
          </u-form-item>
        </u-form>
      </view>
      <view class="button" @click="submits"><text>完成</text></view>

    </view>
  </view>
</template>

<script>
  import {mapState,mapGetters} from 'vuex'
  export default {
    onBackPress(options) {
       this.next = true
      return true;
    },
    computed: {
      ...mapState(['vuex_avater']),
    },
    props: {},
    data() {
      return {
        // 演示地址，请勿直接使用
          action:      '',
          // action:      '/mobile/login/upload',
          avaterFlag: false,
        index: '',
        next: true,
        show: false,
        birthdayShow: false,
        selectLabel: '',
        current: 1,
        tabIndex: '',
        tabList: [{
          name: '添加'
        }, {
          name: '删除'
        }, ],
        familyList: [{
            value: "爸爸",
            label: "爸爸"
          },
          {
            value: '妈妈',
            label: '妈妈'
          },
          {
            value: '爷爷',
            label: '爷爷'
          },
          {
            value: '奶奶',
            label: '奶奶'
          },
          {
            value: '哥哥',
            label: '哥哥'
          },
          {
            value: '姐姐',
            label: '姐姐'
          },
          {
            value: '其他',
            label: '其他'
          },
          {
            value: '无',
            label: '无'
          }
        ],


        form: {
          nickName: '',
          sex: '',
          phonenumber: '',
          relation: '',
          address: "",
          school: "",
          // 联系人
          contactArray: [{
            contactRelation: "",
            contactNick: "",
            contactPhone: ""
          }],

          // 联系人
          studentArray: [{
            name: "",
            sex: "",
            birthday: "",
            school: "",
          }],
        },


        radioList: [{
            name: '男',
            value: "0",
            disabled: false
          },
          {
            name: '女',
            value: "1",
            disabled: false
          }

        ],
        rules: {
          nickName: [{
              required: true,
              message: '请输入姓名',
              trigger: ['blur', 'change']
            },
            {
              min: 2,
              max: 30,
              message: '姓名长度在2到30个字符',
              trigger: ['blur', 'change']
            }
          ],

          sex: [{
            required: true,
            trigger: ['change', 'blur'],
            message: '请选择性别',
          }],
          phonenumber: [{
              required: true,
              message: '请输入手机号',
              trigger: ['blur', 'change']
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              // 正则检验前先将值转为字符串
              transform(value) {
                return String(value);
              },
              message: '手机格式错误',
              trigger: ['blur', 'change']
            },
          ],
          relation: [{
            required: true,
            trigger: ['change', 'blur'],
            message: '请选择关系'
          }],
          address: [{
            required: true,
            trigger: ['change', 'blur'],
            message: '请填写联系地址'
          }]

        },
      }
    },
    onLoad(option) {
     this.form.phonenumber = option.phoneNo
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
      this.action = this.vuex_config.baseUrl + '/mobile/login/upload'
    },
    methods: {


      tabChange(indexxx) {
        this.current = indexxx;

        if (indexxx == 0) {
          this.handleAddStudentInfo()

        } else {
          this.handleDeleteStudentInfo()
        }
      },
      change(e) {
       
        this.form.studentArray[this.tabIndex].birthday= e.result
      },

    selectBirthdayConfirm(e) {
        this.tabIndex = e
        this.birthdayShow = true

      },
      selectConfirm(e) {
        this.index = e
        this.show = true

      },
      // 增加联系人
      handleAddContactInfo() {
        this.$set(this.form.contactArray, this.form.contactArray.length, {
          contactRelation: "",
          contactNick: "",
          contactPhone: ""
        })
      },
      // 删除联系人
      handleDeleteContactInfo(index) {
        this.form.contactArray.splice(index, 1)
      },

      // 增加学生
      handleAddStudentInfo() {
        this.$set(this.form.studentArray, this.form.studentArray.length, {
          name: "",
          sex: "",
          birthday: "",
          school: ""
        })
      },
      // 删除学生
      handleDeleteStudentInfo() {
        this.form.studentArray.splice(this.form.studentArray.length - 1, 1)
      },
      confirms(e) {
        if (this.index === '') {
          if (e[0].value == "无") {
            this.selectLabel = ""
            this.form.relation = ""
          } else {
            this.selectLabel = e[0].label
            this.form.relation = e[0].value
          }
        } else {
          if (e[0].value == "无") {

            this.form.contactArray[this.index].contactRelation = ""
          } else {
            this.form.contactArray[this.index].contactRelation = e[0].value
          }
        }
        this.index = ""

      },
      back() {
        this.next = !this.next
      },
      submit() {

        this.$refs.uForm.validate(valid => {
          if (valid) {
            for (let item of this.form.contactArray) {
            // const phoneregex = /^1[3-9]\d{9}$/;   
            // if (!phoneregex.test(item.contactPhone)) {
            //           this.$u.toast('手机号格式错误');
            //           return null;
            //       } 
              if ((!(item.contactNick == "" & item.contactPhone == "" & item.contactRelation == "") &
                  (!(!(item.contactNick == "") & !(item.contactPhone == "") & !(item.contactRelation == ""))))) {

                this.$refs.uToast.show({
                  title: '请填写完整联系人',
                  type: 'error',
                });
                return ''
              }
            }


            this.next = !this.next
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },

      submits() {
        for (let item of this.form.studentArray) {
          if (item.name == "" & item.name.length < 2) {
            this.$refs.uToast.show({
              title: '姓名格式有误或为空',
              type: 'error',
            });
            return ''
          }

          if (item.sex == "") {
            this.$refs.uToast.show({
              title: '请选择性别',
              type: 'error',
            });
            return ''
          }
          if (item.birthday == "") {
            this.$refs.uToast.show({
              title: '请选择生日',
              type: 'error',
            });
            return ''
          }
          if (item.school.length < 2) {
            this.$refs.uToast.show({
              title: '请填写就读学校',
              type: 'error',
            });
            return ''
          }


        }
        // uni.request({
        //   url:
        // })
        this.$u.api.registerUserInfo(
          this.form
          ).then(res => {
            this.$u.vuex('vuex_studentArray',res.data)
            uni.reLaunch({
            	url: '/pages/sys/msg/index'
            });
          
          
          
          
          
        })


      },

      radioChange(e) {
        this.sex = e
      }

    },

  };
</script>

<style scoped lang="scss">
  /************************************************************
  ** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
  ** 否则页面将无法正常显示                                  **
  ************************************************************/


  view,
  image,
  text {
    box-sizing: border-box;
    flex-shrink: 0;
  }

.circle-upload .u-upload-wrapper {
  width: 100px; /* 设置上传组件的宽度 */
  height: 100px; /* 设置上传组件的高度 */
  border-radius: 50%; /* 设置边框半径为上传组件宽度和高度的一半，使其呈现圆形 */
  background-color: #f5f5f5; /* 设置上传组件的背景颜色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-upload .u-upload-wrapper .u-upload-text {
  font-size: 16px; /* 设置上传文字的字体大小 */
  color: #333; /* 设置上传文字的颜色 */
}
  .panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;

    .panel {
      background-color: white;
      border-radius: 3px;
      margin-bottom: 8px;

      .panel-body {
        display: flex;
        justify-content: space-around;

        .panel-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          font-size: 13px;
          padding: 10px 0;
        }
      }
    }
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

  }

  .flex-col {
    display: flex;
    flex-direction: column;

  }
  .contact{
      background: #ffffff;
      width: 10rpx;
      .input-placeholder{
      	text-align: center!important;
      }
    
  }

  .justify-start {

    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-centers {
    position: relative;
    left: -127%;
    align-items: center;
    justify-content: start;
  }

  .items-center {
    align-items: center;
    justify-content: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-stretch {
    align-items: stretch;
  }

  .self-start {
    position: relative;
    left: 37%;
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-center {
    align-self: center;
  }

  .self-baseline {
    align-self: baseline;
  }

  .self-stretch {
    align-self: stretch;
  }

  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .relative {
    position: relative;
  }


  .button {
    color: #ffffff;
    font-size: 32rpx;
    width: 95%;
    height: 80rpx;
    background: #497bff;

    box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(15, 168, 250, 0.4);
    border-radius: 10rpx;
    line-height: 80rpx;
    text-align: center;
    margin: 50rpx auto 0;
  }

  .mt-15 {
    width: 300rpx;
  }

  w {
    margin-top: 34rpx;

  }

  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;

    .group {
      padding: 0 50rpx 172rpx;
      overflow-y: auto;

      .text_2 {
        color: #505050;
        font-size: 52rpx;
        font-family: HarmonyOSSansSC;
        line-height: 48.36rpx;
      }

      .font {
        font-size: 32rpx;
        font-family: HarmonyOSSansSC;
        line-height: 29.4rpx;
        color: #000000;
      }

      .text_3 {
        color: #9e9e9e;
        line-height: 30.08rpx;
      }

      .section {
        margin-top: 56rpx;

        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 172rpx;
      
        .image-wrapper {
          position: relative;
          left: -15%;
          padding: 64rpx;
          background-image: url('/static/iconfont/CameraBackgroud.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          justify-content: center;
          width: 172rpx;

          .image_4 {
            position: relative;
            width: 48rpx;
            height: 42rpx;
             opacity: 0; /* 设置透明度为 0 */
          }
          .image_1000 {
              position: absolute;
              top: -40rpx;
              left: -25rpx;
               opacity: 1; /* 设置透明度为 0 */
          }
        }
      }

      .equal-division {
        align-self: flex-start;
        margin-top: 60rpx;

        .image_5 {
          width: 32rpx;
          height: 32rpx;
        }

        .font_2 {
          font-size: 26rpx;
          font-family: HarmonyOSSansSC;
          line-height: 25.64rpx;
          color: #000000;
        }

        .text_4 {
          font-size: 28rpx;
          color: #b9b9b9;
        }

        .text_5 {
          font-size: 28rpx;
        }
      }

      .group_2 {
        width: 365.96rpx;
      }

      .group_3 {
        padding-bottom: 24rpx;
        border-bottom: solid 2rpx #dadada;

        .text_6 {
          line-height: 24.18rpx;
        }

        .text_7 {
          line-height: 29.12rpx;
        }

        .text_9 {
          line-height: 24.1rpx;
        }

        .text_10 {
          line-height: 29.48rpx;
        }
      }

      .view {
        margin-top: 56rpx;
      }

      .group_4 {
        padding: 0 4rpx 24rpx;
        border-bottom: solid 2rpx #dadada;

        .text_8 {
          line-height: 24.34rpx;
        }
      }

      .view_2 {
        margin-top: 52rpx;
      }

      .font_3 {
        font-size: 26rpx;
        font-family: HarmonyOSSansSC;
        line-height: 25.64rpx;
      }

      .view_3 {
        margin-top: 52rpx;
      }

      .group_5 {
        align-self: stretch;
        margin-top: 52rpx;

        .text_11 {
          line-height: 24rpx;
        }

        .text_12 {
          line-height: 30.02rpx;
        }
      }

      .input {
        align-self: stretch;
        margin-top: 80rpx;

        .text_13 {
          color: #ffffff;
          line-height: 27.72rpx;
        }
      }

      .text-wrapper {
        padding: 28rpx 0 40rpx;
        background-image: url('https://ide.code.fun/api/image?token=65c106ae78b1d90011092dd9&name=95ee8f4e2c5c2c5ac4426145e983c631.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
</style>